<template>
  <div class="container-fluid">
    <div class="common_title">
      文章类别管理
    </div>
    <div class="container-fluid common_con">
      <table
        class="table table-striped table-bordered table-hover mp20 category_table"
      >
        <thead>
          <tr>
            <th>名称</th>
            <th>Slug</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>奇趣事</td>
            <td>funny</td>
            <td class="text-center">
              <a
                href="javascript:void(0);"
                data-toggle="modal"
                class=" btn btn-info btn-xs"
                >编辑</a
              >
              <a href="javascript:void(0);" class="btn btn-danger btn-xs"
                >删除</a
              >
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="text-center">
              <a
                href="javascript:void(0)"
                class="btn btn-success"
                id="xinzengfenlei"
                data-toggle="modal"
                data-target="#myModal"
                @click="addCategoryClick"
                >新增分类</a
              >
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <!-- 模态框 -->
    <div ref="modal">
      <div class="form-group">
        <label for="recipient-name" class="control-label">分类名称:</label>
        <input type="text" class="form-control" id="recipient-name" />
      </div>
      <div class="form-group">
        <label for="message-text" class="control-label">分类描述：</label>
        <input class="form-control" id="message-text" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'articleCategory',
  methods: {
    /* 新增分类 */
    addCategoryClick () {
      this.$confirm(this.$refs.modal.innerHTML, '新增分类', {
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>

<style></style>
